<template>
  <ElForm class="setting-pop" :model="data" @submit.native.prevent>
    <header class="setting-pop-hd">选项配置</header>
    <ElFormItem label="启用控件" prop="widget">
      <ElSwitch v-model="data.widget" />
    </ElFormItem>

    <ElFormItem label="启用骑缝控件" prop="riding">
      <ElSwitch v-model="data.riding" />
    </ElFormItem>

    <ElFormItem label="允许拖入控件" prop="droppable">
      <ElSwitch v-model="data.droppable" />
    </ElFormItem>

    <ElFormItem label="控件跨页拖动" prop="widgetMovingAcrossPages">
      <ElSwitch v-model="data.widgetMovingAcrossPages" />
      <i class="el-icon-info" style="margin-left: 6px" title="仅限普通控件，骑缝和批量控件不允许跨页拖动"></i>
    </ElFormItem>

    <!-- <ElFormItem label="控件参与方是否必填" prop="widgetActorRequired">
      <ElSwitch v-model="data.widgetActorRequired" />
    </ElFormItem> -->
  </ElForm>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { Widget } from 'fdd-contract'

/** 配置项 */
export const setting = {
  /** 是否启用控件 */
  widget: true,
  /** 是否启用骑缝控件 */
  riding: true,
  /** 是否允许拖入控件 */
  droppable: true,
  /** 控件是否支持跨页拖动（仅限普通控件，骑缝和批量控件不允许跨页拖动） */
  widgetMovingAcrossPages: true,
  /** 控件参与方是否必填 */
  widgetActorRequired: (widget: Widget) => widget.isSign
}

export default defineComponent({
  name: 'SettingPop',

  props: {
    /** 配置数据 */
    data: {
      type: Object as PropType<typeof setting>,
      default: () => ({ ...setting })
    }
  }
})
</script>

<style lang="scss" scoped>
.setting-pop {
  width: 200px;

  &-hd {
    $h: 40px;
    height: $h;
    margin-top: -12px;
    margin-bottom: 8px;
    line-height: $h;
    border-bottom: $border-solid;
  }

  .el-form-item {
    margin-bottom: 0;
  }
}
</style>
